<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/25 0025
  Time: 上午 9:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新途第一期摄影大赛投票</title>
    <%--<link rel="stylesheet" href="${cdnContentPath}/static/framwork7/dist/css/framework7.ios.min.css">--%>
    <script src="${cdnContentPath}/static/jquery/jquery-3.1.0.min.js"></script>
    <script src="${cdnContentPath}/static/plugin/layer/layer.js"></script>
    <script type="text/javascript" src="${cdnContentPath}/static/js/constant.js"></script>
    <script src="${cdnContentPath}/static/js/jquery.lazyload.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        /**
        * framework7 样式
        */

        .content-block-inner::before {
            /*background-color: #c8c7cc;*/
            bottom: auto;
            content: "";
            display: block;
            height: 1px;
            left: 0;
            position: absolute;
            right: auto;
            top: 0;
            transform-origin: 50% 0 0;
            width: 100%;
            z-index: 15;
        }

        .content-block-inner::after {
           /* background-color: #c8c7cc;*/
            bottom: 0;
            content: "";
            display: block;
            height: 1px;
            left: 0;
            position: absolute;
            right: auto;
            top: auto;
            transform-origin: 50% 100% 0;
            width: 100%;
            z-index: 15;
        }

        .content-block-inner {
            background: #fff none repeat scroll 0 0;
            color: #000;
            margin-left: -15px;
            padding: 10px 15px;
            position: relative;
            width: 100%;
        }

        .content-block {
            box-sizing: border-box;
            color: #6d6d72;
            margin: 35px 0;
            padding: 0 15px;
        }

        body {
            margin: 0px;
            padding: 0px;
            background: #EFEFF4;
        }

        .tag {
            margin-bottom: 10px;
        }

        .tag p {
            font-size: 16px;

        }

        .module_1 {
            width: 100%;
            height:100%;
            opacity: 0.6;
            position:absolute;
            left:0px;
            top:0px;
            background-color: #000;
            filter: alpha(opacity=30);
        }

        .module_2 {
            z-index: 19891015;
            width: 632px;
            height: 800px;
            margin: 0 auto;
            position:absolute;
            top:0px;
        }

        .module_close{
            display: none;
        }

    </style>
</head>
<body>
<!-- Views -->
<div class="views">
    <!-- Your main view -->
    <div class="view view-main">
        <!-- Pages -->
        <div class="pages">
            <!-- Page, "data-page" contains page name -->
            <div class="page" data-page="index">
                <!-- Scrollable page content -->
                <div class="page-content">
                    <div class="content-block" id="contentList">
                        <%--<div class="content-block-inner tag">
                            <div style="width:80%;margin:0 auto;height:932px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);padding:20px 20px;border-radius: 12px;">
                                <div style="background: #aaa; height:600px; background-size:cover">
                                    <div><img data-original="/static/image/event/phototrahpy/no_1.png" width="100%"
                                              height="100%"/></div>
                                    <div style="height:40px"></div>
                                    <div style="height:75px;font-family: PingFangSC;color: #49928f;text-align: center;font-size: 54px;font-weight: 800;">
                                        新西兰是一种美
                                    </div>
                                    <div style="width:70%;height: 90px;margin:0 auto;font-family: PingFangSC;color: #52aba7;text-align: center;font-size: 32px;padding:22px 50px">
                                        蜿蜒山路也阻挡不了我看你的波澜壮阔、拍摄于但尼丁-孤独灯塔
                                    </div>
                                    <div style=" height: 70px;font-family: PingFangSC;color: #49928f;text-align: center;font-size: 50px;">
                                        发布者:白晓峰
                                    </div>
                                </div>
                            </div>
                            <div style="height:50px"></div>
                            <div onclick="startVote(1)"
                                 style="  width: 380px;height: 85px;border-radius: 100px;border: solid 2px #a5acb9;margin:0 auto;text-align: center;line-height:85px;">
                                <span style="height: 45px;font-family: PingFangSC;color: #52aba7;font-size: 32px;">投票</span>
                            </div>
                            <div style="height: 40px;font-family: PingFangSC;color: #f5a623;text-align: center;font-size: 28px;margin-top: 40px;">
                                <span>No:01</span>
                                &nbsp;&nbsp;&nbsp;
                                <span>累计得票：365</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>名次：3</span>
                            </div>
                        </div>--%>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="module_1" class="module_close"></div>
<div id="module_2" class="module_close">
    <div id="" class="layui-layer-content" style="height: 800px;">
        <div id="tong" class="hide layui-layer-wrap" style="position: relative;">
            <div>
                <img src="../img/not_gz.png" style="width:100%;height:632px;position:absolute;">
            </div>
            <div style="margin:0 auto;width: 432px;height: 67px;font-family: PingFangSC;color: #ffffff;position:relative;top:632px;
            text-align: center;font-size: 48px;">
                请先长按识别二维码关注《新途微助手》
            </div>
        </div>
    </div>
    <span class="layui-layer-setwin"></span><span class="layui-layer-resize"></span></div>
<script type="text/template7" id="module">
    {{#each DataList}}
    <div class="content-block-inner tag">
        <div style="width:80%;margin:0 auto;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);padding:20px 20px;border-radius: 12px;">
            <div style="  background-size:cover">
                <div><img data-original="/static/image/event/phototrahpy/{{Content.PhotoPath}}" width="100%"
                          height="600px"/></div>
                <div style="height:40px"></div>
                <div style="font-family: PingFangSC;color: #49928f;text-align: center;font-size: 54px;font-weight: 800;">
                    {{Content.Title}}
                </div>
                <div style="width:70%;margin:0 auto;font-family: PingFangSC;color: #52aba7;text-align: center;font-size: 32px;padding:22px 50px">
                    {{Content.Description}}
                </div>
                <div style=" font-family: PingFangSC;color: #49928f;text-align: center;font-size: 50px;">
                    发布者:{{Content.Name}}
                </div>
            </div>
        </div>
        <div style="height:50px"></div>
        <div onclick="startVote('{{Content.Id}}')"
             style="  width: 380px;border-radius: 100px;border: solid 2px #a5acb9;margin:0 auto;text-align: center;line-height:85px;">
            <span style="height: 45px;font-family: PingFangSC;color: #52aba7;font-size: 32px;">投票</span>
        </div>
        <div style="height: 40px;font-family: PingFangSC;color: #f5a623;text-align: center;font-size: 28px;margin-top: 40px;">
            <span>No:{{Content.Id}}</span>
            &nbsp;&nbsp;&nbsp;
            <span>累计得票：{{VoteCount}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>名次：{{Ranking}}</span>
        </div>
    </div>
    {{/each}}
</script>
<script src="${cdnContentPath}/static/template7/dist/template7.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        loadContent();
        var para = {
            url: location.href.split('#')[0],
        }
        var url = "${ctx}/mulanweb/wecharPay/getSignature";
        $.ajax({
            url: url,
            async: true,
            debug: true,
            type: "post",
            dataType: "json",
            data: para,
            success: function (data) {
                var info = data.DataList;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx1a5d74a8c7cb135e', // 必填，公众号的唯一标识
                    timestamp: info.timestamp, // 必填，生成签名的时间戳
                    nonceStr: info.noncestr, // 必填，生成签名的随机串
                    signature: info.signature,// 必填，签名，见附录1
                    jsApiList: [
                        'onMenuShareTimeline',
                        ',onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone'
                    ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    success: function () {
                        alert("网页授权成功");
                    },
                    fail: function () {
                        alert("网页授权失败");
                    }
                });
            }
        });

        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            alert("配置失败");
            console.info(res);
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            setFx();
        });
        var imgUrl='http://weixin.mulanweb.com/static/image/xinxilan_logo.png';
        var link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1a5d74a8c7cb135e&redirect_uri=http%3a%2f%2fweixin.mulanweb.com%2fmulanweb%2fevent%2fphotography%2froute&response_type=code&scope=snsapi_base&state=photography#wechat_redirect';
        //获取详情信息

        function setFx() {
            var desc = 'Stunning NZ｜留住新西兰';
            var title = '新途第一期摄影大赛投票';
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: title,
                link: link,
                imgUrl: imgUrl,
                success: function () {
                    //成功
                    fxS();
                },
                cancel: function () {
                    //取消
                    fxF();
                }
            })

            //分享给朋友
            wx.onMenuShareAppMessage({
                title: title,
                link: link,
                desc: desc,
                imgUrl: imgUrl,
                success: function () {
                    //成功
                    fxS();
                },
                cancel: function () {
                    //取消
                    fxF();
                }
            })

            //分享到QQ
            wx.onMenuShareQQ({
                title: title,
                link: link,
                desc: desc,
                imgUrl: imgUrl,
                success: function () {
                    //成功
                    fxS();
                },
                cancel: function () {
                    //取消
                    fxF();
                }
            });

            //分享到腾讯微博
            wx.onMenuShareWeibo({
                title: title,
                link: link,
                desc: desc,
                imgUrl: imgUrl,
                success: function () {
                    //成功
                    fxS();
                },
                cancel: function () {
                    //取消
                    fxF();
                }
            });

            //QQ空间
            wx.onMenuShareQZone({
                title: title,
                link: link,
                desc: desc,
                imgUrl: imgUrl,
                success: function () {
                    //成功
                    fxS();
                },
                cancel: function () {
                    //取消
                    fxF();
                }
            });

        }

        function  fxS(){

        }
        function  fxF(){

        }


    });

    function startVote(id) {
        var url = Constant.contextUrl + '/mulanweb/event/photography/startVote';
        var para = {targetId: id}
        $.post(url, para, function (info) {
            if (info.ReturnCode == 2) {
                openWindow();
            } else {
                alert(info.AlertMessage);
                loadContent();
            }
        })
    }

    function loadContent() {
        var url = Constant.contextUrl + '/mulanweb/event/photography/getPhotographyContent';
        var para = {}
        $.post(url, para, function (info) {
            var moduleDetailHtml = $("#module").html();
            var compiledTemplate = Template7.compile(moduleDetailHtml);
            var newDetailHtml = compiledTemplate(info);
            $("#contentList").html(newDetailHtml);
            $("img").lazyload(
                    {
                        effect: "fadeIn",
                        threshold: 200
                    });
        });
    }

    var tag = false;
    function openWindow() {
        var width = ($(window).width()- 632)/ 2;
        var height = $(window).height();
        $("#module_1").removeClass("module_close").addClass("module_1").css("height",height);
        $("#module_2").removeClass("module_close").addClass("module_2").css("left",width);
        document.getElementById('module_1').scrollIntoView();
        tag=true;
    }

    $("body").on("click",function(){
        if(tag){
            closeWindow();
        }
    })

    function closeWindow() {
        $("#module_1").addClass("module_close");
        $("#module_2").addClass("module_close");
        tag=false;
    }


</script>
</body>
</html>
